<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">  
    
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<title> dsafds</title> 
	 
	<link rel="stylesheet"  href="./css/public.css">     
	<script src="./js/jquery.js"></script>  
  
</head>
<body style="background-color:#5cd8d8;" > 
 
<div id="hallist"> 
	 <div>
	 	  <ul class="imglist" id="bodyall">
	 	     <li class="onfocust" style="width:100%;text-align:center;"><img src="./images/ta.jpg" style="width:100%;"></li>
	 	     <li style="width:100%;text-align:center;"><img src="./images/tb.jpg" style="width:100%;"></li>
	 	     <li style="width:100%;text-align:center;"><img src="./images/tc.jpg" style="width:100%;"></li>
	 	  </ul>
	 	  <div class="navigation">
	 	  	  <a href="#" class="onfocust"></a>
	 	  	   <a href="#"></a>
	 	  	  <a href="#"></a>
	 	  </div>
	</div>
	 
	 
	 
	 
</div>
<style>
	.imglist li{
	  display:none;
	}
  .imglist .onfocust{
    display:block;
  }
  .navigation{
     position: fixed; 
     height: 40px; 
     z-index: 1000;
     width: 100%;
     bottom: 0px;
     margin-bottom: 100px; 
     text-align:center;
  }
  .navigation a{
    padding: 0px 5px 0px 5px; 
margin-left: 10px; 
line-height: 5px;
background:url(images/none.png) no-repeat;
    
  }
  .navigation a.onfocust{
    background:url(images/focus.png) no-repeat;
  }
</style>
<script>
	$(document).ready(function(){
		var temheight = $(window).height();
		var temwidth = $(window).width();
		$('#bodyall li').css({'height':temheight,'width':temwidth});
		$('#bodyall img').css({'height':temheight,'width':temwidth});
		
	});
	$('.navigation a').click(function(){
		  $(this).addClass('onfocust').siblings().removeClass('onfocust');
		  $('.imglist li').removeClass('onfocust');
		 var shul =  $('.navigation').find('a').index(this);
		 $('.imglist').find('li').eq(shul).addClass('onfocust');
	});
	 
		var startX = 0, startY = 0,deriction = 0;
 
	function touchSatrtFunc(evt) {
                try
                {
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

                    var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标
                    //记录触点初始位置
                    startX = x;
                    startY = y; 
                 //  var text = 'TouchStart事件触发：（' + x + ', ' + y + '）';
                 //  document.getElementById("result").innerHTML = text;
                 
                }
                catch (e) {
                   // alert('touchSatrtFunc：' + e.message);
                }
  }
	function touchMoveFunc(evt,targetname) {
    try{
                    //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等
               var touch = evt.touches[0]; //获取第一个触点
                    var x = Number(touch.pageX); //页面触点X坐标
                    var y = Number(touch.pageY); //页面触点Y坐标      
                    deriction = x - startX;
                    if (deriction != 0) {
                        // text += '<br/>左右滑动';
                        // -的时候为向左滑动  +  向右滑动
                     
                        var allshu = $('.navigation').find('a').length;//总数
                        var onfocust = 0; //当前INDEX 
                        var checkobj =  $('.navigation').find('a');
	                      for(var i=0;i<checkobj.length;i++){
	                         	  if($(checkobj).eq(i).hasClass('onfocust')){
	                         	      onfocust = i;
	                         	  }
	                      }
                        if(deriction > 0){
                        	/*
                            */
                             var checkr = Number(onfocust)-1;
                        	   if(onfocust > 0){
                        	    	$('.navigation a').removeClass('onfocust');
                        	   	 $('.navigation').find('a').eq(checkr).addClass('onfocust');
                        	   	 $('.imglist li').removeClass('onfocust');
                               $('.imglist').find('li').eq(checkr).addClass('onfocust');
                        	   }
                        }else{ 
                        	  var checkr = Number(onfocust)+1;
                            if(checkr < allshu){
                            		$('.navigation a').removeClass('onfocust');
                               $('.navigation').find('a').eq(checkr).addClass('onfocust');
                               $('.imglist li').removeClass('onfocust');
                               $('.imglist').find('li').eq(checkr).addClass('onfocust');
                            }
                        	 
                        }
                      
                    } 
                  //  document.getElementById("result").innerHTML = text;
     }catch (e) {
                  //  alert('touchMoveFunc：' + e.message);
    }
  }
  function touchEndFunc(evt) {
                try {
                   
                    //alert($(evt).html());

                  //  var text = 'TouchMove事件触发：（' + x + ', ' + y + '）';

                     
                    
                }
                catch (e) {
                	alert('xxx');
                  //  alert('touchEndFunc：' + e.message);
                }
  }
	function bindEvent() {
         document.getElementById('bodyall').addEventListener('touchstart', touchSatrtFunc, false); 
         document.getElementById('bodyall').addEventListener('touchmove', function(e) { touchMoveFunc(e,'bodyall'); } , false);
        document.getElementById('bodyall').addEventListener('touchend',touchEndFunc, false);
        // document.addEventListener('touchend', touchEndFunc, false); 
  } 
	function isTouchDevice() { 
      try {
         document.createEvent("TouchEvent"); 
         bindEvent(); //绑定事件
      }
      catch (e) { 
      	alert('xxxxxxxxxx');
      }
  } 
  window.onload = isTouchDevice;
	 
</script>
  
</body>
</html>
 